<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 48
})
</script>

<template>
  <svg
    :width="props.size"
    :height="props.size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="exam-icon"
  >
    <defs>
      <linearGradient id="examGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#4facfe;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#00f2fe;stop-opacity:1" />
      </linearGradient>
    </defs>

    <!-- 公告板背景 -->
    <rect x="8" y="8" width="48" height="48" rx="6" fill="url(#examGrad)" opacity="0.2"/>

    <!-- 公告板主体 -->
    <rect x="12" y="12" width="40" height="40" rx="4" fill="url(#examGrad)"/>

    <!-- 喇叭图标 -->
    <path d="M20 24 L20 40 L26 36 L26 28 L20 24Z" fill="white"/>
    <path d="M26 28 L38 22 L38 42 L26 36" fill="white" opacity="0.8"/>

    <!-- 声波线条 -->
    <path d="M40 26 L44 26" stroke="white" stroke-width="2" stroke-linecap="round"/>
    <path d="M40 32 L46 32" stroke="white" stroke-width="2" stroke-linecap="round"/>
    <path d="M40 38 L44 38" stroke="white" stroke-width="2" stroke-linecap="round"/>
  </svg>
</template>

<style scoped>
.exam-icon {
  transition: all 0.3s ease;
}

.exam-icon:hover {
  transform: scale(1.1) rotate(5deg);
}
</style>
